<template>
  <div v-if="dialogData.isShow">
    <el-dialog :model-value="true" destroy-on-close :title="dialogData.title" @close="closeDialog">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="90px">
        <el-row>
          <el-col>
            <el-form-item label="参数名称" prop="configName">
              <el-input v-model="form.configName" placeholder="请输入参数名称"/>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="参数键名" prop="configKey">
              <el-input v-model="form.configKey" placeholder="请输入参数键名"/>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="系统内置" prop="configType">
              <el-radio-group v-model="form.configType">
                <el-radio label="Y" border>是</el-radio>
                <el-radio label="N" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// 表单
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {addSysConfig, getSysConfig, updateSysConfig} from "@/api/config";

const formRef = ref<FormInstance>()

const emits = defineEmits<{
  (event: 'refresh'): void
}>()

let form: any = ref({
  configType: 'N'
})
// 效验规则
const rules = reactive<FormRules>({
  configName: [
    {required: true, message: '请输入参数名称', trigger: 'blur'},
  ],
  configKey: [
    {required: true, message: '请输入参数键值', trigger: 'blur'},
  ],
  configType: [
    {required: true, message: '请选择是否系统内置', trigger: 'blur'},
  ],
})
const getDetails = (id: number | string) => {
  getSysConfig(id).then(res => {
    form.value = Object.assign({}, form.value, res);
  })
}
// 弹框数据
const dialogData = reactive({
  isShow: false,
  title: "新增",
  configId: null,
})
// 打开弹框
const openDialog = async (row: any) => {
  dialogData.isShow = true;
  dialogData.title = '新增';
  if (row?.configId) {
    dialogData.configId = row.configId;
    dialogData.title = '编辑';
    getDetails(row.configId);
  }
}
// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  dialogData.configId = null;
  form.value = {configType: 'N'};
}
// 提交
const submit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    if (valid) {
      if (form.value.configId) {
        updateSysConfig(form.value).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      } else {
        addSysConfig(form.value).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      }
    }
  })

}

defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
